<template>
  <div class="container">
    <div class="box box-ver w-p100 h-p100">
      <div class="search box box-ac">
        <div class="icon icon-search"></div>
        <input placeholder="搜索" v-model="searchWord" class="box-f1" type="text">
      </div>
      <div class="person-container box of-x-s">
        <div class="box">
          <div v-for="(item, index) in travelPerson" :value="item" :key="index" class="person-item tx-c animated fadeIn ell">{{item.userName}}</div>
        </div>
      </div>
      <div class="fixed-bar">
        <div @click.stop @touchstart="scroll(index)" @touchmove="scroll(index)" v-for="(item, index) in searchList" :key="index" class="text">
          {{index}}
        </div>
      </div>
      <div ref="scroll" class="box scroll-container box-ver box-f1 of-y-s">
        <div v-for="(item, index) in searchList" :value="item" :key="index" class="list-content">
          <div :id="index" class="tag">
            {{index}}
          </div>
          <div class="list list1">
            <div @click="checkItem(index, index1)" v-for="(item1, index1) in item" :value="item1" :key="index1"  class="item box box-ac">
              <div class="box-f1 box box-ver">
                <div class="box box-ac">
                  <div class="name">{{item1.userName}}</div>
                  <div class="tc-999 code">{{item1.userNumber}}</div>
                </div>
                <div class="dep tc-999 ell">
                  {{item1.depName.split('_').pop()}}
                </div>
              </div>
              <div :class="{act: item1.checked}" class="icon icon-checkbox"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div @click="sure()" class="sure">确定</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getPyData, getTop } from '@/assets/js/common'
export default {
  name: 'xinCenStep2PersonSelect',
  data () {
    return {
      dataList: [],
      searchList: [],
      searchWord: '',
      timer: null,
      travelPerson: null
    }
  },
  computed: mapState(['userNum', 'userInfo', 'bizAccountBill']),
  mounted () {
    let entryIndex = this.$route.query.index
    this.travelPerson = this.bizAccountBill.entrys[entryIndex].travelPerson
    this.getCsApplicant()
  },
  watch: {
    searchWord () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.search()
      }, 666)
    }
  },
  methods: {
    initPersonChecked () {
      for (let i in this.searchList) {
        this.searchList[i].forEach((item1, index1) => {
          this.travelPerson.forEach(item2 => {
            if (item2.userNum === item1.userNumber) {
              this.searchList[i][index1].checked = true
            }
          })
        })
      }
      this.$forceUpdate()
    },
    checkItem (index, index1) {
      let person = this.searchList[index][index1]
      let checked = person.checked
      if (checked) {
        this.searchList[index][index1].checked = false
        let personIndex
        this.travelPerson.forEach((item, index) => {
          if (item.userNum === person.userNumber) {
            personIndex = index
          }
        })
        this.travelPerson.splice(personIndex, 1)
      } else {
        this.searchList[index][index1].checked = true
        this.travelPerson.push({
          userNum: person.userNumber,
          userName: person.userName,
          depNumber: person.depNum,
          depName: person.depName.split('_').pop(),
          companyName: this.userInfo.companyName,
          companyNumber: this.userInfo.companyNum
        })
      }
    },
    sure () {
      let entryIndex = this.$route.query.index
      this.bizAccountBill.entrys[entryIndex].travelPerson = this.travelPerson
      this.$store.commit('bizAccountBill', {
        entrys: this.bizAccountBill.entrys
      })
      this.$router.go(-1)
    },
    scroll (index) {
      let $target = document.getElementById(index)
      let $scroll = this.$refs.scroll
      let top = getTop($target, $scroll)
      $scroll.scrollTop = top
    },
    search () {
      let searchWord = this.searchWord
      let list = []
      this.dataList.forEach(item => {
        if (item.userName.indexOf(searchWord) > -1 || item.userName.indexOf(searchWord) > -1) {
          list.push(item)
        }
      })
      this.searchList = getPyData(list, 'userName')
      this.initPersonChecked()
    },
    getCsApplicant () {
      if (sessionStorage.getItem('getCsApplicant')) {
        this.dataList = JSON.parse(sessionStorage.getItem('getCsApplicant'))
        this.searchList = getPyData(this.dataList, 'userName')
        this.initPersonChecked()
        return
      }
      this.$http({
        url: this.$config.api.host,
        data: {
          method: 'getCsApplicant',
          companyNum: this.userInfo.companyNum
        }
      }).then(res => {
        if (res.code === 200) {
          sessionStorage.setItem('getCsApplicant', JSON.stringify(res.t))
          this.dataList = res.t.map
          this.searchList = getPyData(res.t, 'userName')
          this.initPersonChecked()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/search';
@import '../assets/css/config';
@import '../assets/css/mixins';
.scroll-container{
  margin-bottom:1rem;
}
.sure{
  position:absolute;
  bottom:0;
  left:0;
  @include btn(100%, 1rem, .36rem);
}
.icon-checkbox{
  margin-right:.2rem;
}
.list-content{
  background-color:$bgColor;
}
.item{
  font-size:.26rem;
  .code{
    padding-left:.2rem;
  }
  .dep{
    padding-top:.1rem;
  }
}
.person-container{
  padding-bottom:.2rem;
  margin:0 .2rem;
  .person-item{
    padding:.15rem .3rem;
    border:1px solid $themeColor;;
    color:$themeColor;
    margin:0 .2rem;
    width:1rem;
  }
}
.fixed-bar{
  width:.5rem;
  position: absolute;
  z-index:8;
  top:55%;
  right:0;
  color:#999;
  transform: translateY(-50%);
  .text{
    width:.5rem;
    text-align: center;
  }
}
</style>
